import { useDrag } from "react-dnd";

export interface MaterialItemProps {
  name: string;
  desc: string;
}

export function MaterialItem(props: MaterialItemProps) {
  const { name, desc } = props;
  const [_, drag] = useDrag({
    type: name,
    item: {
      type: name,
    },
  });
  return (
    <div
      ref={drag}
      className="h-8 flex items-center border rounded px-2 py-1 cursor-pointer bg-white
       border-slate-200 hover:border-blue-600
       select-none w-[calc(50%-6px)] text-xs "
    >
      {desc}
    </div>
  );
}
